<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
    <div style="width: 200px; height:200px;background:#888;"@click="test1">
    <div style="width: 100px; height: 100px; background: pink;" @click.stop="test2"></div></div>
    
    <form action="/xxx" @submit.prevent="test3">
            <input type="text" name="username">
            <input type="password" name="password">
            <input type="submit" value="登陆" >
    </form>    
    
    <button @click.once="test4">点击一次</button>

    <input type="text" @keyup.enter="test5" >
  </div>

  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: "#test",
      data: {

      },
      methods:{
        test1(){
            alert('out')
        },
        test2(){
            alert('inner')
        },
        test3(){
            alert('222')
        },
        test4(){
            alert('333')
        },
        test5(e){
            alert(e.target.value)
        }
      }
    })
  </script>
</body>
</html>